<template>
  <div class="addIndexed">
    <div class="sh_frame_box">
      <!-- <van-nav-bar title="掌上搜索" /> -->
      <!-- 搜索框组件 -->
      <div class="boxseach">
        <input
          type="seach"
          class="seach"
          @keydown.enter="includeSearchOne"
          placeholder="请输入抖音昵称或抖音号进行收录"
          v-model.trim="search"
        />
        <!-- 放大镜图片（定位到固定位置） -->
        <div class="search_img_box">
          <img
            v-if="!searchImg"
            src="@/assets/two/seach.png"
            class="imgseach"
            @click="includeSearchOne"
          />
          <img
            v-if="searchImg"
            src="@/assets/one/search.png"
            class="imgseach"
            @click="includeSearchOne"
          />
        </div>
      </div>
      <ul v-if="includeList.length">
        <van-list
          :finished="finished"
          @load="onLoad"
          :immediate-check="false"
          v-model="loading"
          offset="100"
        >
          <li v-for="(item, index) in includeList" :key="index">
            <div>
              <img
                :src="item.avatar_larger"
                class="inLogo"
                @click="toTalentDetails(item.uid, item.exsit)"
              />
            </div>
            <div>
              <p
                class="nackName"
                @click="toTalentDetails(item.uid, item.exsit)"
              >
                {{ item.title }}
              </p>
              <p>{{ item.text_fans }}</p>
            </div>
            <div>
              <button
                class="toInclude"
                @click="toInclude(item.sec_uid, item.uid, item)"
                v-if="item.exsit == 0"
              >
                添加收录
              </button>
              <button v-if="item.exsit == 1" class="btn">已收录</button>
              <button v-if="item.exsit == 2" class="btn">正在收录</button>
            </div>
          </li>
          <p
            v-if="!loading_01 && includeList && !retryShow"
            class="includeText"
          >
            找不到想找的账号？
            <span
              slot="reference"
              class="codeShow"
              @click="goPage({ path: '/contactQR' })"
              >告诉我们</span
            >
          </p>
        </van-list>
      </ul>
      <van-loading size="24px" vertical type="spinner" v-if="loading_01"
        >拼命加载中...</van-loading
      >
      <div class="zw" v-if="!includeList.length && !loading_01 && !retryShow">
        <img src="@/assets/three/noData.png" alt />
        <p>搜索结果为空 没有搜索到相关的内容</p>
      </div>

      <div
        v-show="!loading_01 && retryShow && includeList.length != 0"
        @click="includeSearch()"
        class="retryBox"
      >
        <div class="imgBox"></div>
        <p>请点击重试</p>
      </div>
      <div
        @click="includeSearch()"
        class="retryBox retryBox1"
        v-show="!loading_01 && retryShow && includeList.length == 0"
      >
        <div class="imgBox"></div>
        <p>请点击重试</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      one: false,
      loading_01: false,
      active: 0,
      showPage: true,
      search: "",
      includeList: [],
      searchImg: false,

      finished: false,
      loading: false,
      includePage: 1,
      includeData: false,
      retryShow: false,
    };
  },
  props: {},
  watch: {
    search(newVal) {
      if (newVal) {
        this.searchImg = true;
        // this.showPage = true;
        // this.getSearchLog();
      } else {
        this.searchImg = false;
        this.includeList = [];
      }
    },
  },
  computed: {},
  created() {
    // console.log(this.$route.query.search);
    if (this.$route.query.search) {
      this.search = this.$route.query.search;
      this.searchImg = true;
      this.includePage = 1;
      this.includeSearch();
    }
  },
  mounted() {},
  methods: {
    goPage(pms) {
      this.$router.push(pms);
    },
    toTalentDetails(id, exsit) {
      //  已收录的可以跳到详情
      if (exsit == 1) {
        this.$router.push({
          path: "/talentDetailsMain",
          query: {
            id,
          },
        });
      }
    },
    includeSearchOne() {
      this.includePage = 1;
      this.includeList = [];
      this.includeSearch();
    },
    // 查询收录
    includeSearch() {
      let that = this;
      this.loading = true;
      if (that.search != this.$route.query.search) {
        this.$router.replace({
          query: {
            search: that.search,
          },
        });
      }
      this.retryShow = false;
      that.loading_01 = true;
      that.$axios
        .get(
          "/api/author/GetAuthorSearch",
          {
            params: {
              keyword: that.search,
              page: this.includePage,
            },
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel03 != null) {
                that.cancel03();
              }
              that.cancel03 = c;
            }),
          }
        )
        .then((res) => {
          that.loading_01 = false;
          if (res.data.code == 0) {
            this.loading = false;
            if (res.data.data.length) {
              this.includeData = false;
              this.includePage += 1;
              this.includeList = this.includeList.concat(res.data.data);
            }
            if (res.data.data.length < 10 || !res.data.data) {
              this.finished = true;
              this.includeData = true;
            }
            this.retryShow = false;
          } else if (res.data.code == 1001) {
            this.retryShow = true;
            this.includeData = false;
          } else if (res.data.code == 1002) {
            this.includeData = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onLoad() {
      if (this.includeData == false && this.retryShow == false) {
        this.includeSearch();
      }
    },
    // 确认收录
    toInclude(sec_uid, uid, item) {
      let that = this;
      that.$axios
        .post(
          "/api/author/include",
          {
            sec_uid: sec_uid,
            uid: uid,
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel04 != null) {
                that.cancel04();
              }
              that.cancel04 = c;
            }),
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            this.$dialog.alert({
              title: "收录成功",
              className: "publicDialog",
              message: "我们将在10分钟内完成部分数据收录请您稍后再试~",
            });
            item.exsit = 2;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped lang="less">
.addIndexed {
  // width: 100%;
  position: relative;
  // overflow: hidden;
  height: 100vh;
  .sh_frame_box {
    padding: 0 0.4rem;
    background-color: #fff;
    padding-top: 10px;
    .boxseach {
      background: #fff;
      width: 100%;
      background: #f1f1f1;
      display: flex;
      border-radius: 0.453333rem;
      .seach {
        width: 85%;
        height: 0.906667rem;
        border-radius: 0.453333rem;
        border: none;
        background: #f1f1f1;
        font-size: 0.33rem;
        color: #222;
        padding-left: 0.426667rem;
        box-sizing: border-box;
      }
      .search_img_box {
        width: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .imgseach {
        width: 0.4rem;
        height: 0.4rem;
      }
    }
    .includeText {
      font-size: 0.346667rem;
      margin-top: 0.42rem;
      padding-bottom: 0.42rem;
      text-align: center;
      color: #888888;

      span {
        color: #fd7f2c;
      }
    }
  }
  ul {
    li {
      // width: 5.173333rem;
      margin: auto;
      padding: 0.4rem 0;
      border-bottom: 1px solid #e5e5e5;
      display: flex;
      justify-content: space-between;
      > div {
        &:nth-child(1) {
          width: 1.173333rem;
          height: 1.173333rem;
          border-radius: 50%;
          overflow: hidden;
          > img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
          margin-right: 0.266667rem;
        }
        &:nth-child(2) {
          flex: 1;
          align-self: center;
          > p {
            &:nth-child(1) {
              font-size: 0.4rem;
              color: #222222;
            }
            &:nth-child(2) {
              font-size: 0.32rem;
              color: #888;
            }
          }
        }
        &:nth-child(3) {
          align-self: center;
          button {
            width: 2.133333rem;
            height: 0.8rem;
            background-color: #fd7f2c;
            border-radius: 0.133333rem;
            font-size: 0.346667rem;
            color: #ffffff;
            border: none;
          }
          .btn {
            width: 2.133333rem;
            height: 0.8rem;
            background-color: #fff2ea;
            color: #fd7f2c;
          }
        }
      }
    }
  }
  .van-loading {
    margin-top: 0.4rem;
    padding-bottom: 0.4rem;
  }
  .zw {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 3.986667rem;
    text-align: center;
    margin-top: 1.066667rem;
    img {
      width: 3.96rem;
      // height: 2.826667rem;
    }
    p {
      font-size: 0.346667rem;

      color: #888888;
    }
  }
}
.retryBox {
  font-size: 0.346667rem;
  color: #888888;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .imgBox {
    width: 0.933333rem;
    height: 1.066667rem;
    margin-top: 0.18rem;
    margin-bottom: 0.18rem;
    background: url("../../assets/img/refresh.png") no-repeat;
    background-size: contain;
  }
}
.retryBox1 {
  position: absolute;
  top: 50%;
  margin-top: -42px;
  left: 50%;
  margin-left: -33px;
}
/deep/ .van-list__loading {
  display: none !important;
}
</style>
